<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绿地养护</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style>
			body {
				/*padding-top: 25px;*/
			}
			span {
				margin: 10px;
			}
			.Tabl {
				height: 50px;
				width: 88%;
				font-size: 14px;

				text-align: left;
				margin-left: 6%;
			}
			.Td1 {
				color: #B8B8B8;
				width: 70px;
				font-size: 13px;
			}
			.Td2 {
				color: rgb(85,85,85);
				font-size: 13px;
				text-align: left;
				width: 80px;

			}
			.Hr {
				height: 1px;
				width: 96%;
				background-color: #D8D8D8;
				margin-left: 2%;
			}
			.Butt {
				border: 1px solid #B8B8B8;
				border-radius: 20px;
				color: #FFFFFF;
				height: 17px;
				width: 17px;
				outline: none;
			}
			.TabImg {
				height: 150px;
				width: 96%;
				margin-left: 2%;
				border: 10px solid #D8D8D8;
			}
			.TdImg1 {
				height: 110px;
				width: 90px;
			}
			.TdImg2 {
				height: 110px;
				width: 90px;
			}
			.ButAdd {
				height: 110px;
				width: 100px;
				font-size: 100px;
				color: #FFFFFF;
				background-color: #B8B8B8;
			}
			.TabL {
				height: 75px;
				width: 88%;
				font-size: 16px;
				font-weight: bold;
				text-align: left;
				margin-left: 6%;
			}
			.ButL {
				height: 40px;
				width: 100%;
				background-color: #D0D0D0;
				position: fixed;
				bottom: 0;
			}
			.Td3 {
				text-align: center;
				width: 50%;
			}
			select {
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				border: none;
				background: none;
			}
			
		</style>
	</head>
	<body>
	<button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">基本信息</button>
		<table class="Tabl">
			<tr>

				<td class="Td1">绿地名称</td>
				<td class="Td2" id="ldname" ></td>
			</tr>
		</table>
		<hr class="Hr"/>
				<table class="Tabl">
					<tr>
				<td class="Td1">养护内容</td>
				<td class="Td2" id="maintenanceContent" ></td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">工作数量</td>
				<td class="Td2" id="maintenanceNum" ></td>
					<td class="Td1">工人数量</td>
				<td class="Td2" id="peopleNum" ></td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
			
				<td class="Td1">工具数量</td>
				<td class="Td2" id="manHour" ></td>
				<td class="Td1">机械名称</td>
				<td class="Td2" id="mechanicalNames" ></td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				
				<td class="Td1">机械类型</td>
				<td class="Td2" id="mechanicalType"></td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">养护时间</td>
				<td class="Td2" id="maintenanceDate" ></td>
				
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">补充信息</td>
			</tr>
		</table>
		<table class="TabL">
			<tr>
				<td>				<textarea rows="4" cols="35" placeholder="填写你的其他内容描述！"id="remark"style="color:#FF8C00"></textarea></td>
			</tr>
		</table>
		<button style="background-color: #F2F2F2;height: 40px;width: 100%;font-size: 18px;">图片信息</button>
		<div style="padding: 10px;">
			<div id="imgBox1"></div>
			<div style="width: 80%;position: absolute;right: 10%;left:10%;top: 20%;z-index: 1000000;text-align: center;"
				 id="bigImage"></div>
		</div>

		<!-- <table class="ButL">
		<tr>
		<td class="Td3"><button>?</button></td>
		<td class="Td3"><button>?</button></td>
		</tr>
		</table> -->
	</body><script src="../../script/webuploader.min.js"></script>
	<script src="../../script/diyUpload.js"></script>
	<script src="../../script/jquery.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript">
		apiready = function() {
		var id = api.pageParam.id;
			//片区id
			var areaid = $api.getStorage('selectpor').id

			//项目id
			var proid = $api.getStorage('userSession').data.proId;

			//获取绿地养护
			$.ajax({
				type : "post",
				//async : false, //同步执行
				url : BaseServiceUrl + "mobile/mainten/view.json",
				data : {

					id : id

				},
				dataType : "json", //返回数据形式为json
				success : function(result) {

					var data=result.data
					$("#ldname").html(data.greedLand.greedLandAdministrator.name);
					$("#maintenanceContent").html(data.maintenType.name);
					$("#maintenanceNum").html(data.maintenanceNum);
             $("#peopleNum").html(data.peopleNum);
             $("#manHour").html(data.manHour);
             $("#mechanicalType").html(data.mechanicalType);
						  $("#maintenanceDate").html(data.maintenanceDate);
             $("#fzpeople").html(data.fzpeople);
             $("#remark").html(data.remark);
					$("#mechanicalNames").html(data.mechanicalName);
						 for (var i = 0; i < result.data.maintenPhotoList.length; i++) {
							 $("#imgBox1").append("<div style=\"margin-left:5px;float:left;margin-top:5px;\"><img onclick='showBig(this)'  width=\"130\" height=\"130\" src=\"" + BaseServiceUrl +  result.data.maintenPhotoList[i].photo + "\"\/><\/div>");
						 }
				}
			});
		};
		function showBig(t) {
			document.getElementById("bigImage").innerHTML = "<img src='" + t.src + "' onclick='closeBig(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
		}

		function closeBig(t) {
			document.getElementById("bigImage").innerHTML = "";
		}


	</script>
</html>
